<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bo dy{
				width: 500px;
				height: 10000px; /* 滚动条 */
				/* 背景尺寸：函数：contain[√] cover[保证原生图大小] */
				background-size: cover; /* 等比例宽高【缩放】，保证页面图片全部显示 */
				background-image: url(img/花园宝宝.png);
				/* 背景图控制属性: 滚动scroll 固定fixed */
				background-attachment: fixed;
			}
			
			
			div{
				width: 500px;
				height: 500px;
				/* 等同于border的功能：确定选择器是否选中，布局 */
				backg round-color: #e4393c;
				background-image: url(img/花园宝宝.png);
				/* 背景图小于空间【自动平衡椅】去掉平铺 */
				background-repeat: no-repeat;
				backgro und-repeat: repeat-x;
				backgrou nd-repeat: repeat-y;
				/* 背景尺寸，属性值：数值/百分百
				                   函数 cover 等比例宽高【放大】，图片覆盖整个容器
								       contain 等比例宽高【缩放】，保证页面图片全部显示
				 */
				border: 1px solid red;
				background-size: 20%;
				/* 背景定位：先决条件，背景图小于外围空间！功能：精灵图定位 */
				background-position: bottom center; /* 位置固定9个点 */
				background-position: 80% 0; /* 任意固定位置，数值px+数值% */
				
				/* 复合属性： 全部子属性顺序 */
				/* background:background-image background-color background-position
				              background-size  background-repeat background-attachment
				 */
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi enim numquam maxime mollitia facere, repudiandae, necessitatibus excepturi at eligendi ipsum esse. Cum minima praesentium velit? Saepe tenetur rerum aspernatur fugiat!
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus sunt corrupti culpa officia a, perferendis animi. Numquam sit voluptas earum explicabo laboriosam praesentium nihil tempore alias ad libero. Eligendi, pariatur?
		<!-- css背景  背景图，背景颜色   ---区别：页面任意移动位置
				    html图片img                ---区别：页面定死位置
					子属性
					background-color背景颜色：十六进制色值
					复合属性--省去子属性
					background：十六进制色值-->
		 <div></div>
	</body>
</html>